<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>智慧大棚系统 - 员工管理</title>
		<script src="https://cdn.tailwindcss.com"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/vue@3.3.11/dist/vue.global.prod.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@1.7.7/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>

		<!-- Tailwind配置 -->
		<script>
			tailwind.config = {
				theme: {
					extend: {
						colors: {
							primary: '#2E7D32', // 主色调：绿色，代表农业、生长
							secondary: '#1976D2', // 辅助色：蓝色，代表科技、数据
							accent: '#F59E0B', // 强调色：橙色，代表警告、提醒
							neutral: {
								100: '#F9FAFB',
								200: '#F3F4F6',
								300: '#E5E7EB',
								400: '#D1D5DB',
								500: '#9CA3AF',
								600: '#6B7280',
								700: '#4B5563',
								800: '#1F2937',
								900: '#111827'
							}
						},
						fontFamily: {
							inter: ['Inter', 'sans-serif'],
						},
						boxShadow: {
							'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
							'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
						}
					},
				}
			}
		</script>

		<style type="text/tailwindcss">
			@layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-grid {
                background-image: linear-gradient(#e5e7eb 1px, transparent 1px),
                                  linear-gradient(to right, #e5e7eb 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .errmsg {
                @apply text-red-500 text-xs ml-2;
            }
            .management-title {
                @apply text-xl font-bold text-neutral-800 mb-4 border-b border-neutral-200 pb-2;
            }
            .management-title-dialog {
                @apply text-lg font-bold text-neutral-800 mb-4 border-b border-neutral-200 pb-2;
            }
            .search-container {
                @apply flex flex-wrap gap-2 mb-4;
            }
            .search-input {
                @apply px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .search-button {
                @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-200;
            }
            .leftmargin {
                @apply ml-2;
            }
            .button-spacing {
                @apply mb-4;
            }
            .button {
                @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-200;
            }
            .editButton {
                @apply bg-blue-600 hover:bg-blue-700;
            }
            .deleteButton {
                @apply bg-red-600 hover:bg-red-700;
            }
            .detailButton {
                @apply bg-purple-600 hover:bg-purple-700;
            }
            .payButton {
                @apply bg-green-600 hover:bg-green-700;
            }
            table {
                @apply w-full border-collapse;
            }
            th {
                @apply px-4 py-2 bg-neutral-100 text-left text-xs font-medium text-neutral-600 uppercase tracking-wider border border-neutral-200;
            }
            td {
                @apply px-4 py-2 border border-neutral-200;
            }
            tr:nth-child(even) {
                @apply bg-neutral-50;
            }
            tr:hover {
                @apply bg-neutral-100 transition-colors duration-150;
            }
            .pagination {
                @apply flex mt-4 space-x-2;
            }
            .pagination button {
                @apply px-3 py-1 border border-neutral-300 rounded hover:bg-neutral-100 transition-colors duration-150;
            }
            dialog {
                @apply fixed inset-0 m-auto w-1/2 max-w-md p-6 rounded-lg shadow-xl z-50 bg-white border-none;
            }
            dialog::backdrop {
                @apply bg-black/50 backdrop-blur-sm;
            }
            dialog form {
                @apply space-y-4;
            }
            dialog label {
                @apply block text-sm font-medium text-neutral-700 mb-1;
            }
            dialog input, dialog select, dialog textarea {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            dialog textarea {
                @apply h-24 resize-none;
            }
            .sidebar {
                @apply w-64 bg-white border-r border-neutral-200 h-screen fixed left-0 top-0 pt-20 overflow-y-auto;
            }
            .sidebar ul {
                @apply space-y-1 px-2;
            }
            .sidebar li {
                @apply rounded-md;
            }
            .sidebar a {
                @apply block px-4 py-2 text-neutral-700 hover:bg-primary/10 hover:text-primary rounded-md transition-colors duration-200;
            }
            .sidebar a.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .header {
                @apply bg-white shadow-md fixed w-full z-50 h-20 flex items-center px-6;
            }
            .header h1 {
                @apply text-xl font-bold text-neutral-800 ml-2;
            }
            .content {
                @apply ml-64 pt-20 px-6 pb-10;
            }
            .highlight {
                @apply bg-yellow-100;
            }
            .status-unpaid {
                @apply bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs;
            }
            .status-paid {
                @apply bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs;
            }
            .readonly-input {
                @apply px-3 py-2 border border-neutral-300 rounded-md bg-neutral-100;
            }
        }
    </style>
	</head>

	<body>
		<div id="app">
			<div class="header">
				<!-- 加入 logo -->
				<div class="bg-primary text-white p-2 rounded-lg">
					<i class="fa-solid fa-farm text-xl"></i>
				</div>
				<h1>智慧大棚管理系统</h1>
			</div>

			<div class="container">
				<!-- 左侧导航栏 -->
				<div class="sidebar">
					<ul>
						<li><a href="/greenhouse/GreenHouseType/list.html" class="sidebar-item">大棚种类管理</a></li>
						<li><a href="/greenhouse/GreenHouseLocation/list.html" class="sidebar-item">大棚位置管理</a></li>
						<li><a href="/greenhouse/GreenHouse/list.html" class="sidebar-item">大棚管理</a></li>
						<li><a href="/greenhouse/Crops/list.html" class="sidebar-item">农产品管理</a></li>
						<li><a href="/greenhouse/PlanType/list.html" class="sidebar-item">计划分类管理</a></li>
						<li><a href="/greenhouse/Plan/list.html" class="sidebar-item">计划管理</a></li>
						<li><a href="/greenhouse/InputType/list.html" class="sidebar-item">投入类别管理</a></li>
						<li><a href="/greenhouse/Input/list.html" class="sidebar-item">投入管理</a></li>
						<li><a href="/greenhouse/Order/list.html" class="sidebar-item">订单管理</a></li>
						<li><a href="/greenhouse/Employee/list.html" class="sidebar-item">员工管理</a></li>
					</ul>
				</div>

				<!-- 内容区域 -->
				<div class="content">
					<h2 class="management-title">员工管理</h2>

					<div class="search-container">
						<input type="text" class="search-input" placeholder="输入员工姓名" v-model="queryParam.employeeName"
							@keyup.enter="query(1)">
						<button class="search-button leftmargin" @click="query(1)">查询</button>
						<button class="button bg-neutral-600" @click="resetQuery">重置</button>
					</div>

					<div class="button-spacing">
						<button class="button" @click="openAddDialog">添加员工</button>
					</div>

					<table>
						<thead>
							<tr>
								<th>序号</th>
								<th>员工编号</th>
								<th>员工姓名</th>
								<th>电话</th>
								<th>住址</th>
								<th>支出</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in filteredRecords" :key="item.id">
								<td>{{index + 1}}</td>
								<td>{{item.employeeId}}</td>
								<td v-html="highlightText(item.employeeName, queryParam.employeeName)"></td>
								<td>{{item.phone}}</td>
								<td>{{item.address}}</td>
								<td>{{calculateTotalPayment(item.id)}}</td>
								<td>
									<button class="button editButton" @click="openEditDialog(item.id)">编辑</button>
									<button class="button deleteButton"
										@click="openDeleteConfirmDialog(item.id)">删除</button>
									<button class="button detailButton"
										@click="openEmployeeDetailDialog(item.id)">员工明细</button>
								</td>
							</tr>
							<tr v-if="filteredRecords.length === 0">
								<td colspan="7" class="text-center py-4 text-neutral-500">没有找到匹配的记录</td>
							</tr>
						</tbody>
					</table>

					<!-- 分页组件 -->
					<div class="pagination" v-if="page.pages > 1">
						<button @click="query(1)">首页</button>
						<button v-for="index in page.pages" @click="query(index)">{{index}}</button>
						<button @click="query(page.pages)">末页</button>
					</div>
				</div>
			</div>

			<!-- 添加员工对话框 -->
			<dialog ref="addDialogRef">
				<h2 class="management-title-dialog">添加员工</h2>
				<form>
					<label>员工编号：</label>
					<input type="text" placeholder="输入员工编号" v-model="addParam.employeeId">
					<span class="errmsg" v-show="errShow.employeeId">请输入员工编号</span>

					<label>员工姓名：</label>
					<input type="text" placeholder="输入员工姓名" v-model="addParam.employeeName">
					<span class="errmsg" v-show="errShow.employeeName">请输入员工姓名</span>

					<label>电话：</label>
					<input type="text" placeholder="输入电话" v-model="addParam.phone">
					<span class="errmsg" v-show="errShow.phone">请输入电话</span>

					<label>住址：</label>
					<input type="text" placeholder="输入住址" v-model="addParam.address">
					<span class="errmsg" v-show="errShow.address">请输入住址</span>

					<div class="flex justify-end space-x-2">
						<button class="button" type="button" @click="add">保存</button>
						<button class="button bg-neutral-600" type="button" @click="closeAddDialog">取消</button>
					</div>
					<span class="errmsg" v-show="errShow.addError">添加失败,请重新输入或者联系管理员</span>
				</form>
			</dialog>

			<!-- 编辑员工对话框 -->
			<dialog ref="editDialogRef">
				<h2 class="management-title-dialog">编辑员工</h2>
				<form>
					<label>员工编号：</label>
					<p class="readonly-input">{{updateParam.employeeId}}</p>

					<label>员工姓名：</label>
					<input type="text" v-model="updateParam.employeeName">
					<span class="errmsg" v-show="errShow.employeeName">请输入员工姓名</span>

					<label>电话：</label>
					<input type="text" v-model="updateParam.phone">
					<span class="errmsg" v-show="errShow.phone">请输入电话</span>

					<label>住址：</label>
					<input type="text" v-model="updateParam.address">
					<span class="errmsg" v-show="errShow.address">请输入住址</span>

					<div class="flex justify-end space-x-2">
						<button class="button" type="button" @click="update">保存</button>
						<button class="button bg-neutral-600" type="button" @click="closeEditDialog">取消</button>
					</div>
					<span class="errmsg" v-show="errShow.updateError">更新失败,请重新输入或者联系管理员</span>
				</form>
			</dialog>

			<!-- 删除确认对话框 -->
			<dialog ref="confirmDialogRef">
				<p>您确定删除该员工吗？</p>
				<div class="flex justify-end space-x-2">
					<button class="button" @click="confirmDelete">确定</button>
					<button class="button bg-neutral-600" @click="closeDeleteConfirmDialog">取消</button>
				</div>
			</dialog>

			<!-- 员工明细对话框 -->
			<dialog ref="employeeDetailDialogRef" class="w-3/4 max-w-4xl">
				<h2 class="management-title-dialog">员工明细</h2>
				<div class="mb-4 grid grid-cols-2 gap-4">
					<div>
						<p><strong>员工编号：</strong>{{currentEmployee.employeeId}}</p>
						<p><strong>员工姓名：</strong>{{currentEmployee.employeeName}}</p>
					</div>
					<div>
						<p><strong>电话：</strong>{{currentEmployee.phone}}</p>
						<p><strong>住址：</strong>{{currentEmployee.address}}</p>
						<p><strong>总支出：</strong>{{calculateTotalPayment(currentEmployee.id)}}</p>
					</div>
				</div>

				<div class="flex justify-between items-center mb-4">
					<h3 class="text-lg font-semibold">计划明细</h3>
					<button class="button" @click="openAddPlanDialog">添加计划</button>
				</div>

				<table>
					<thead>
						<tr>
							<th>序号</th>
							<th>计划名称</th>
							<th>计划分类</th>
							<th>实际开始时间</th>
							<th>实际完成时间</th>
							<th>工资</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(plan, index) in currentEmployee.plans" :key="plan.id">
							<td>{{index + 1}}</td>
							<td>{{plan.planName}}</td>
							<td>{{plan.planCategory}}</td>
							<td>{{formatDate(plan.startDate)}}</td>
							<td>{{formatDate(plan.endDate)}}</td>
							<td>{{plan.salary}}</td>
							<td>
								<span :class="getStatusClass(plan.status)">{{getStatusText(plan.status)}}</span>
							</td>
							<td>
								<button class="button editButton" @click="openEditPlanDialog(plan.id)"
									v-if="plan.status !== 'paid'">编辑</button>
								<button class="button deleteButton"
									@click="openDeletePlanConfirmDialog(plan.id)">删除</button>
								<button class="button payButton" @click="payPlan(plan.id)"
									v-if="plan.status === 'unpaid'">支付</button>
							</td>
						</tr>
						<tr v-if="currentEmployee.plans && currentEmployee.plans.length === 0">
							<td colspan="8" class="text-center py-4 text-neutral-500">暂无计划</td>
						</tr>
					</tbody>
				</table>

				<div class="flex justify-end mt-4">
					<button class="button bg-neutral-600" @click="closeEmployeeDetailDialog">关闭</button>
				</div>
			</dialog>

			<!-- 添加计划对话框 -->
			<dialog ref="addPlanDialogRef">
				<h2 class="management-title-dialog">添加计划</h2>
				<form>
					<label>计划名称：</label>
					<select v-model="addPlanParam.planName">
						<option value="">选择计划名称</option>
						<option v-for="planName in planNames" :value="planName">{{planName}}</option>
					</select>
					<span class="errmsg" v-show="errShow.planName">请选择计划名称</span>

					<label>计划分类：</label>
					<select v-model="addPlanParam.planCategory">
						<option value="">选择计划分类</option>
						<option v-for="category in planCategories" :value="category">{{category}}</option>
					</select>
					<span class="errmsg" v-show="errShow.planCategory">请选择计划分类</span>

					<label>实际开始时间：</label>
					<input type="date" v-model="addPlanParam.startDate">
					<span class="errmsg" v-show="errShow.startDate">请选择实际开始时间</span>

					<label>实际完成时间：</label>
					<input type="date" v-model="addPlanParam.endDate">
					<span class="errmsg" v-show="errShow.endDate">请选择实际完成时间</span>

					<label>工资：</label>
					<input type="number" placeholder="输入工资" v-model="addPlanParam.salary">
					<span class="errmsg" v-show="errShow.salary">请输入工资</span>

					<div class="flex justify-end space-x-2">
						<button class="button" type="button" @click="addPlan">保存</button>
						<button class="button bg-neutral-600" type="button" @click="closeAddPlanDialog">取消</button>
					</div>
				</form>
			</dialog>

			<!-- 编辑计划对话框 -->
			<dialog ref="editPlanDialogRef">
				<h2 class="management-title-dialog">编辑计划</h2>
				<form>
					<label>计划名称：</label>
					<p class="readonly-input">{{editPlanParam.planName}}</p>

					<label>计划分类：</label>
					<p class="readonly-input">{{editPlanParam.planCategory}}</p>

					<label>实际开始时间：</label>
					<input type="date" v-model="editPlanParam.startDate">
					<span class="errmsg" v-show="errShow.startDate">请选择实际开始时间</span>

					<label>实际完成时间：</label>
					<input type="date" v-model="editPlanParam.endDate">
					<span class="errmsg" v-show="errShow.endDate">请选择实际完成时间</span>

					<label>工资：</label>
					<input type="number" v-model="editPlanParam.salary">
					<span class="errmsg" v-show="errShow.salary">请输入工资</span>

					<div class="flex justify-end space-x-2">
						<button class="button" type="button" @click="updatePlan">保存</button>
						<button class="button bg-neutral-600" type="button" @click="closeEditPlanDialog">取消</button>
					</div>
				</form>
			</dialog>

			<!-- 删除计划确认对话框 -->
			<dialog ref="confirmPlanDialogRef">
				<p>您确定删除该计划吗？</p>
				<div class="flex justify-end space-x-2">
					<button class="button" @click="confirmDeletePlan">确定</button>
					<button class="button bg-neutral-600" @click="closeDeletePlanConfirmDialog">取消</button>
				</div>
			</dialog>
		</div>

		<script>
			const {
				createApp,
				ref,
				reactive,
				onMounted,
				computed,
				watch
			} = Vue;

			createApp({
				setup() {
					// 查询参数
					const queryParam = reactive({
						employeeName: '',
						pageNum: 1,
						pageSize: 10
					});

					// 计划名称选项
					const planNames = ref([
						'春季种植计划', '夏季种植计划', '秋季种植计划', '冬季种植计划',
						'大棚维护计划', '设备检修计划', '病虫害防治计划'
					]);

					// 计划分类选项
					const planCategories = ref([
						'种植', '维护', '检修', '防治', '管理', '收获', '包装', '运输'
					]);

					// 所有员工数据
					const allEmployees = ref([{
							id: 1,
							employeeId: 'EMP2023001',
							employeeName: '张三',
							phone: '13800138001',
							address: '北京市朝阳区科技园A座',
							plans: [{
									id: 1,
									planName: '春季种植计划',
									planCategory: '种植',
									startDate: '2023-03-01',
									endDate: '2023-06-30',
									salary: 5000,
									status: 'paid'
								},
								{
									id: 2,
									planName: '大棚维护计划',
									planCategory: '维护',
									startDate: '2023-07-01',
									endDate: '2023-07-15',
									salary: 2000,
									status: 'paid'
								}
							]
						},
						{
							id: 2,
							employeeId: 'EMP2023002',
							employeeName: '李四',
							phone: '13800138002',
							address: '北京市海淀区科技园B座',
							plans: [{
									id: 3,
									planName: '夏季种植计划',
									planCategory: '种植',
									startDate: '2023-05-01',
									endDate: '2023-08-31',
									salary: 6000,
									status: 'unpaid'
								},
								{
									id: 4,
									planName: '设备检修计划',
									planCategory: '检修',
									startDate: '2023-09-01',
									endDate: '2023-09-10',
									salary: 3000,
									status: 'unpaid'
								}
							]
						},
						{
							id: 3,
							employeeId: 'EMP2023003',
							employeeName: '王五',
							phone: '13800138003',
							address: '北京市丰台区科技园C座',
							plans: [{
									id: 5,
									planName: '秋季种植计划',
									planCategory: '种植',
									startDate: '2023-08-01',
									endDate: '2023-11-30',
									salary: 5500,
									status: 'paid'
								},
								{
									id: 6,
									planName: '病虫害防治计划',
									planCategory: '防治',
									startDate: '2023-12-01',
									endDate: '2023-12-15',
									salary: 2500,
									status: 'unpaid'
								}
							]
						},
						{
							id: 4,
							employeeId: 'EMP2023004',
							employeeName: '赵六',
							phone: '13800138004',
							address: '北京市通州区科技园D座',
							plans: []
						},
						{
							id: 5,
							employeeId: 'EMP2023005',
							employeeName: '钱七',
							phone: '13800138005',
							address: '北京市大兴区科技园E座',
							plans: [{
								id: 7,
								planName: '冬季种植计划',
								planCategory: '种植',
								startDate: '2023-12-01',
								endDate: '2024-02-28',
								salary: 6500,
								status: 'unpaid'
							}]
						}
					]);

					// 分页结果
					const page = reactive({
						records: [],
						total: 0,
						pages: 1,
						pageNum: 1,
						pageSize: 10
					});

					// 高亮显示匹配文本
					const highlightText = (text, keyword) => {
						if (!keyword || !text) return text;
						const regex = new RegExp(keyword, 'gi');
						return text.replace(regex, match => `<span class="highlight">${match}</span>`);
					};

					// 格式化日期
					const formatDate = (dateString) => {
						if (!dateString) return '';
						return dayjs(dateString).format('YYYY-MM-DD');
					};

					// 获取状态文本
					const getStatusText = (status) => {
						return status === 'unpaid' ? '未支付' : '已支付';
					};

					// 获取状态对应的CSS类
					const getStatusClass = (status) => {
						return status === 'unpaid' ? 'status-unpaid' : 'status-paid';
					};

					// 过滤记录（模糊查询）
					const filteredRecords = computed(() => {
						let records = [...allEmployees.value];

						// 员工姓名模糊查询
						if (queryParam.employeeName) {
							const keyword = queryParam.employeeName.toLowerCase();
							records = records.filter(item =>
								item.employeeName.toLowerCase().includes(keyword)
							);
						}

						// 分页处理
						const start = (queryParam.pageNum - 1) * queryParam.pageSize;
						const end = start + queryParam.pageSize;

						// 更新分页信息
						page.total = records.length;
						page.pages = Math.ceil(page.total / queryParam.pageSize);

						return records.slice(start, end);
					});

					// 添加参数
					const addParam = reactive({
						employeeId: '',
						employeeName: '',
						phone: '',
						address: ''
					});

					// 更新参数
					const updateParam = reactive({
						id: null,
						employeeId: '',
						employeeName: '',
						phone: '',
						address: ''
					});

					// 当前员工
					const currentEmployee = reactive({
						id: null,
						employeeId: '',
						employeeName: '',
						phone: '',
						address: '',
						plans: []
					});

					// 添加计划参数
					const addPlanParam = reactive({
						planName: '',
						planCategory: '',
						startDate: '',
						endDate: '',
						salary: ''
					});

					// 编辑计划参数
					const editPlanParam = reactive({
						id: null,
						planName: '',
						planCategory: '',
						startDate: '',
						endDate: '',
						salary: '',
						status: ''
					});

					// 错误提示
					const errShow = reactive({
						employeeId: false,
						employeeName: false,
						phone: false,
						address: false,
						planName: false,
						planCategory: false,
						startDate: false,
						endDate: false,
						salary: false,
						addError: false,
						updateError: false
					});

					// 对话框引用
					const addDialogRef = ref(null);
					const editDialogRef = ref(null);
					const confirmDialogRef = ref(null);
					const employeeDetailDialogRef = ref(null);
					const addPlanDialogRef = ref(null);
					const editPlanDialogRef = ref(null);
					const confirmPlanDialogRef = ref(null);

					// 当前操作的ID
					const currentId = ref(null);
					const currentPlanId = ref(null);

					// 重置查询条件
					const resetQuery = () => {
						queryParam.employeeName = '';
						queryParam.pageNum = 1;
						query(1);
					};

					// 查询数据
					const query = (pageNum) => {
						queryParam.pageNum = pageNum;
						// 这里不需要实际API调用，因为使用了computed属性自动过滤
					};

					// 生命周期钩子 - 页面加载完成后执行
					onMounted(() => {
						// 初始化加载数据
						query(1);
					});

					// 打开添加对话框
					const openAddDialog = () => {
						// 重置添加参数
						Object.assign(addParam, {
							employeeId: '',
							employeeName: '',
							phone: '',
							address: ''
						});

						// 重置错误提示
						resetErrorShow();

						// 显示对话框
						addDialogRef.value.showModal();
					};

					// 关闭添加对话框
					const closeAddDialog = () => {
						addDialogRef.value.close();
					};

					// 添加员工
					const add = () => {
						// 表单验证
						if (!validateAddForm()) {
							return;
						}

						// 模拟API调用
						setTimeout(() => {
							// 生成新ID
							const newId = Math.max(...allEmployees.value.map(item => item.id)) + 1;

							// 添加新记录
							allEmployees.value.push({
								id: newId,
								employeeId: addParam.employeeId,
								employeeName: addParam.employeeName,
								phone: addParam.phone,
								address: addParam.address,
								plans: []
							});

							// 重新查询
							query(1);
							closeAddDialog();
							alert('添加成功');
						}, 300);
					};

					// 打开编辑对话框
					const openEditDialog = (id) => {
						// 找到要编辑的数据
						const item = allEmployees.value.find(item => item.id === id);

						if (item) {
							// 填充编辑表单
							Object.assign(updateParam, {
								id: item.id,
								employeeId: item.employeeId,
								employeeName: item.employeeName,
								phone: item.phone,
								address: item.address
							});

							// 重置错误提示
							resetErrorShow();

							// 显示对话框
							editDialogRef.value.showModal();
						}
					};

					// 关闭编辑对话框
					const closeEditDialog = () => {
						editDialogRef.value.close();
					};

					// 更新员工
					const update = () => {
						// 表单验证
						if (!validateUpdateForm()) {
							return;
						}

						// 模拟API调用
						setTimeout(() => {
							// 找到要更新的记录索引
							const index = allEmployees.value.findIndex(item => item.id === updateParam.id);

							if (index !== -1) {
								// 更新记录
								allEmployees.value[index] = {
									...allEmployees.value[index],
									employeeName: updateParam.employeeName,
									phone: updateParam.phone,
									address: updateParam.address
								};

								// 重新查询
								query(queryParam.pageNum);

								// 显示成功消息
								alert('员工信息已更新');

								// 关闭对话框
								closeEditDialog();
							} else {
								errShow.updateError = true;
							}
						}, 300);
					};

					// 打开删除确认对话框
					const openDeleteConfirmDialog = (id) => {
						currentId.value = id;
						confirmDialogRef.value.showModal();
					};

					// 关闭删除确认对话框
					const closeDeleteConfirmDialog = () => {
						confirmDialogRef.value.close();
					};

					// 确认删除
					const confirmDelete = () => {
						// 模拟API调用
						setTimeout(() => {
							// 删除记录
							allEmployees.value = allEmployees.value.filter(item => item.id !== currentId
								.value);

							// 重新查询
							query(queryParam.pageNum);

							closeDeleteConfirmDialog();
							alert('删除成功');
						}, 300);
					};

					// 打开员工明细对话框
					const openEmployeeDetailDialog = (id) => {
						const employee = allEmployees.value.find(item => item.id === id);
						if (employee) {
							Object.assign(currentEmployee, {
								id: employee.id,
								employeeId: employee.employeeId,
								employeeName: employee.employeeName,
								phone: employee.phone,
								address: employee.address,
								plans: employee.plans ? [...employee.plans] : []
							});
							employeeDetailDialogRef.value.showModal();
						}
					};

					// 关闭员工明细对话框
					const closeEmployeeDetailDialog = () => {
						employeeDetailDialogRef.value.close();
					};

					// 打开添加计划对话框
					const openAddPlanDialog = () => {
						Object.assign(addPlanParam, {
							planName: '',
							planCategory: '',
							startDate: '',
							endDate: '',
							salary: ''
						});
						resetErrorShow();
						addPlanDialogRef.value.showModal();
					};

					// 关闭添加计划对话框
					const closeAddPlanDialog = () => {
						addPlanDialogRef.value.close();
					};

					// 添加计划
					const addPlan = () => {
						if (!validatePlanForm()) {
							return;
						}

						const employeeIndex = allEmployees.value.findIndex(item => item.id === currentEmployee.id);
						if (employeeIndex !== -1) {
							const newPlanId = allEmployees.value[employeeIndex].plans.length > 0 ?
								Math.max(...allEmployees.value[employeeIndex].plans.map(p => p.id)) + 1 :
								1;

							const newPlan = {
								id: newPlanId,
								planName: addPlanParam.planName,
								planCategory: addPlanParam.planCategory,
								startDate: addPlanParam.startDate,
								endDate: addPlanParam.endDate,
								salary: addPlanParam.salary,
								status: 'unpaid'
							};

							if (!allEmployees.value[employeeIndex].plans) {
								allEmployees.value[employeeIndex].plans = [];
							}

							allEmployees.value[employeeIndex].plans.push(newPlan);

							// 更新当前员工显示
							currentEmployee.plans.push(newPlan);

							closeAddPlanDialog();
						}
					};

					// 打开编辑计划对话框
					const openEditPlanDialog = (planId) => {
						const plan = currentEmployee.plans.find(p => p.id === planId);
						if (plan) {
							Object.assign(editPlanParam, {
								id: plan.id,
								planName: plan.planName,
								planCategory: plan.planCategory,
								startDate: plan.startDate,
								endDate: plan.endDate,
								salary: plan.salary,
								status: plan.status
							});
							editPlanDialogRef.value.showModal();
						}
					};

					// 关闭编辑计划对话框
					const closeEditPlanDialog = () => {
						editPlanDialogRef.value.close();
					};

					// 更新计划
					const updatePlan = () => {
						const employeeIndex = allEmployees.value.findIndex(item => item.id === currentEmployee.id);
						if (employeeIndex !== -1) {
							const planIndex = allEmployees.value[employeeIndex].plans.findIndex(p => p.id ===
								editPlanParam.id);
							if (planIndex !== -1) {
								allEmployees.value[employeeIndex].plans[planIndex] = {
									...allEmployees.value[employeeIndex].plans[planIndex],
									startDate: editPlanParam.startDate,
									endDate: editPlanParam.endDate,
									salary: editPlanParam.salary
								};

								// 更新当前员工显示
								const currentPlanIndex = currentEmployee.plans.findIndex(p => p.id === editPlanParam
									.id);
								if (currentPlanIndex !== -1) {
									currentEmployee.plans[currentPlanIndex] = {
										...allEmployees.value[employeeIndex].plans[planIndex]
									};
								}

								closeEditPlanDialog();
							}
						}
					};

					// 打开删除计划确认对话框
					const openDeletePlanConfirmDialog = (planId) => {
						currentPlanId.value = planId;
						confirmPlanDialogRef.value.showModal();
					};

					// 关闭删除计划确认对话框
					const closeDeletePlanConfirmDialog = () => {
						confirmPlanDialogRef.value.close();
					};

					// 确认删除计划
					const confirmDeletePlan = () => {
						const employeeIndex = allEmployees.value.findIndex(item => item.id === currentEmployee.id);
						if (employeeIndex !== -1) {
							allEmployees.value[employeeIndex].plans = allEmployees.value[employeeIndex].plans.filter(
								p => p.id !== currentPlanId.value);
							currentEmployee.plans = currentEmployee.plans.filter(p => p.id !== currentPlanId.value);

							closeDeletePlanConfirmDialog();
						}
					};

					// 支付计划
					const payPlan = (planId) => {
						const employeeIndex = allEmployees.value.findIndex(item => item.id === currentEmployee.id);
						if (employeeIndex !== -1) {
							const planIndex = allEmployees.value[employeeIndex].plans.findIndex(p => p.id ===
								planId);
							if (planIndex !== -1) {
								allEmployees.value[employeeIndex].plans[planIndex].status = 'paid';

								// 更新当前员工显示
								const currentPlanIndex = currentEmployee.plans.findIndex(p => p.id === planId);
								if (currentPlanIndex !== -1) {
									currentEmployee.plans[currentPlanIndex].status = 'paid';
								}
							}
						}
					};

					// 计算员工总支出
					const calculateTotalPayment = (employeeId) => {
						const employee = allEmployees.value.find(item => item.id === employeeId);
						if (!employee || !employee.plans || employee.plans.length === 0) {
							return '0';
						}

						const total = employee.plans
							.filter(plan => plan.status === 'paid')
							.reduce((sum, plan) => sum + parseFloat(plan.salary), 0);

						return total.toFixed(2);
					};

					// 验证添加表单
					const validateAddForm = () => {
						let isValid = true;

						resetErrorShow();

						if (!addParam.employeeId) {
							errShow.employeeId = true;
							isValid = false;
						}

						if (!addParam.employeeName) {
							errShow.employeeName = true;
							isValid = false;
						}

						if (!addParam.phone) {
							errShow.phone = true;
							isValid = false;
						}

						if (!addParam.address) {
							errShow.address = true;
							isValid = false;
						}

						return isValid;
					};

					// 验证更新表单
					const validateUpdateForm = () => {
						let isValid = true;

						resetErrorShow();

						if (!updateParam.employeeName) {
							errShow.employeeName = true;
							isValid = false;
						}

						if (!updateParam.phone) {
							errShow.phone = true;
							isValid = false;
						}

						if (!updateParam.address) {
							errShow.address = true;
							isValid = false;
						}

						return isValid;
					};

					// 验证计划表单
					const validatePlanForm = () => {
						let isValid = true;

						resetErrorShow();

						if (!addPlanParam.planName) {
							errShow.planName = true;
							isValid = false;
						}

						if (!addPlanParam.planCategory) {
							errShow.planCategory = true;
							isValid = false;
						}

						if (!addPlanParam.startDate) {
							errShow.startDate = true;
							isValid = false;
						}

						if (!addPlanParam.endDate) {
							errShow.endDate = true;
							isValid = false;
						}

						if (!addPlanParam.salary || addPlanParam.salary <= 0) {
							errShow.salary = true;
							isValid = false;
						}

						return isValid;
					};

					// 重置错误提示
					const resetErrorShow = () => {
						Object.assign(errShow, {
							employeeId: false,
							employeeName: false,
							phone: false,
							address: false,
							planName: false,
							planCategory: false,
							startDate: false,
							endDate: false,
							salary: false,
							addError: false,
							updateError: false
						});
					};

					return {
						queryParam,
						planNames,
						planCategories,
						page,
						filteredRecords,
						addParam,
						updateParam,
						currentEmployee,
						addPlanParam,
						editPlanParam,
						errShow,
						addDialogRef,
						editDialogRef,
						confirmDialogRef,
						employeeDetailDialogRef,
						addPlanDialogRef,
						editPlanDialogRef,
						confirmPlanDialogRef,
						highlightText,
						formatDate,
						getStatusText,
						getStatusClass,
						resetQuery,
						query,
						openAddDialog,
						closeAddDialog,
						add,
						openEditDialog,
						closeEditDialog,
						update,
						openDeleteConfirmDialog,
						closeDeleteConfirmDialog,
						confirmDelete,
						openEmployeeDetailDialog,
						closeEmployeeDetailDialog,
						openAddPlanDialog,
						closeAddPlanDialog,
						addPlan,
						openEditPlanDialog,
						closeEditPlanDialog,
						updatePlan,
						openDeletePlanConfirmDialog,
						closeDeletePlanConfirmDialog,
						confirmDeletePlan,
						payPlan,
						calculateTotalPayment
					};
				}
			}).mount('#app');
		</script>
	</body>
</html>